<template>
  <div class="personalized-wrap">
    <div class="title">
      <h2>推荐歌单</h2>
			<router-link class="more" to="/songlist" tag="a">
				歌单广场
			</router-link>
    </div>
    <div class="list clearfix">
      <div class="item" v-for="item of personalizeds" :key="item.id" @click="goList(item.id)">
        <div class="box">
          <img class="img" :src="item.picUrl">
        </div>
        <p class="remd-text">{{item.name.substring(0, 20)}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personalized',
  props: {
    personalizeds: Array
  },
  methods: {
    goList (id) {
      this.$router.push({
        path: '/songlistDetail',
        query: { id: id }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .personalized-wrap {
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;
    .title {
      display: flex;
      padding: 0 0 0.3rem;
			align-items: center;
			justify-content: space-between;
      h2 {
        font-size: 0.32rem;
        color: rgba(255, 255, 255, 1);
        font-weight: 100;
      }
			.more {
				display: block;
				padding: 0 0.15rem;
				height: 0.44rem;
				border: 1px solid rgba(255, 255, 255, 0.6);
				border-radius: 1rem;
				font-size: 0.24rem;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				line-height: 0.44rem;
				font-weight: 200;
			}
    }
    .list {
      margin: 0 -0.5%;
      .item {
        width: 33.33333333%;
        display: inline-block;
        vertical-align: top;
        padding: 0 0.06rem 0.3rem;
        .box {
          position: relative;
          padding-bottom: 100%;
          .img {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            z-index: 1;
            border-radius: 0.15rem;
            vertical-align: middle;
          }
        }
        .remd-text {
          padding: 0.2rem 0.02rem 0 0rem;
          line-height: 1.4;
          font-size: 0.24rem;
					color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
</style>
